<template>
  <div class="product">
    <div class="product-bg">
      <div class="product-tab">
        <!-- <div class="tab-bg"></div> -->
        <van-tabs
          sticky
          class="tab"
          v-model="current"
          @click="onTabClick"
        >
          <van-tab
            v-for="(item, index) in tabList"
            :key="index"
            :title="item.lName"
          ></van-tab>
        </van-tabs>
      </div>

      <!-- 列表展示 -->
      <ul class="product-content">
        <li
          v-for="(ele, eleIndex) in sideList.lzWebProductDo"
          :key="eleIndex"
          :style="colorRecord(eleIndex)"
          @click="goDetail(ele, eleIndex)"
        >
            {{ ele.productName }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: "",
  data() {
    return {
      current: 0, // 当前展示的tab索引
      sideList: {}, // 展示对应的商品列表
      tabList: [], // 渲染tab列表
      indexes: '', // 记录添加背景色
      tabIndex: '' // 记录跳转时的列表索引
    };
  },
  activated() {
    this.getInitPage()
    this.$nextTick(() => {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    })

    // 初始化tab栏滚动位置
    this.setScrollLeft()
  },
  methods: {
    // 设置滚动条距离
    setScrollLeft() {
      this.$nextTick(() => {
        const scrollTab = document.querySelector('.van-tab--active')
        scrollTab.scrollIntoView()
        scrollTab.scrollIntoViewIfNeeded()
      })
    },

    // 计算点击后添加的背景颜色
    colorRecord(index) {
      if (this.tabIndex === '') return
      if (Number(this.tabIndex) === this.current && Number(this.indexes) === index) {
        return {
          'color': '#3a77d9'
        }
      }
    },
    /* 控住初始化展示第几个tab */
    getInitPage() {
      const { current = '' } = this.$route.params
      const { list = [] } = JSON.parse(sessionStorage.getItem('productList'))
      // this.tabList = JSON.parse(list)
      if (list.length) {
        this.tabList = list
      }
      // 切换tab时跳转到详情页回跳导致的tab为初始时的状态
      if (current === '') {
        // 如果在详情页强制刷新后，在跳转后来，默认索引都为0
        this.current = this.tabIndex || 0
        this.sideList = list[this.current]
        return
      }
      this.current = current
      this.sideList = this.tabList[this.current]
    },
    // 跳转到详情页
    goDetail(item, eleIndex) {
      this.indexes = eleIndex
      this.tabIndex = this.current
        this.$router.push('/detail');
        sessionStorage.setItem('productInfo', JSON.stringify(item))
    },
    onTabClick() {
      this.sideList = this.tabList[this.current]
    }
  }
};
</script>

<style lang="scss" scoped>
.product {
  &-bg {
    min-height: 607px;
    background-color: #f2f2f2;
    position: relative;
    top: 70px;
    /* 内容部分 */
    .product-content {
      padding: 0px 28px 0;
      li {
        font-size: 16px;
        padding: 17px 0 17px 12px;
        letter-spacing: .5px;
        color: #1a1a1a;
        border-bottom: 1px solid rgb(180, 179, 179);
        font-family: "PingFang SC";
      }
    }
    .product-content  li:last-child{
      border: none;
    }
  }
  &-tab {
    position: fixed;
    top: 60px;
    width: 100%;
    padding: 20px 0;
    background-color: #f2f2f2;
  }

  .xlement {
    height: 180px;
  }
}

</style>

<style lang="scss">
.product {
  .van-tabs__wrap {
    white-space: nowrap;
    padding: 0 10px;
  }

  // 隐藏滚动条
  .van-tabs__nav--line::-webkit-scrollbar {
    display: none;
  }
  // tab文件超出兼容各个浏览器
  // .van-tab__text--ellipsis {
  //   box-orient: vertical;
  //   -webkit-box-orient: vertical;
  //   -moz-box-orient: vertical;
  // }
  .van-tabs__nav {
    background: none;
    padding-bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0);
    overflow: auto;
    // padding: 0 52px;
  }
  .van-tab {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
  }
  .van-tab:nth-child(3) {
    margin-right: 0px;
  }
  [class*="van-hairline"]::after {
    border: none;
  }
  .van-tab--active {
    color: #3a77d9;
  }
  .van-tabs__line {
    width: 60px !important;
    bottom: 0;
    background: #3a77d9;
  }

}
</style>
